<template>
	<view class="album-list">
		<!-- 相册列表 -->
		<view class="album-item" v-for="item in albumList" :key="item.id">
			<!-- 长按触发事件 @longpress必须作为view组件的事件 -->
			<view @longpress="showEditOrDel(item.id)">
				<u-image width="300rpx" height="300rpx" border-radius="15px" :src="item.albumCover"
					@click="navigateToImageList(item.id)">
					<view slot="error" style="font-size: 24rpx;">无封面</view>
				</u-image>
			</view>
			
			<view class="album-name">
				{{item.albumName}}
			</view>
			<view class="img-count">
				{{item.imgCount}}
			</view>
		</view>
		
		<!-- 新建相册 -->
		<view style="width:50px;height: 50px;position: fixed; top: 86%; left: 80%;background-color: #2979ff; border-radius: 25px;">
			<u-icon name="plus" color="#fff" size="40" @click="addAlbum" style="margin-left: 15px;margin-top: 15px;"></u-icon>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex"
	export default {
		data() {
			return {
				albumList: [],
				//当前页
				pageNum: 1,
				//页大小
				pageSize: 10,
				//总页数
				pages: undefined
			}
		},
		onLoad() {
			this.getData()
		},
		//把onLoad替换成onShow就不用绑定事件来实现首页刷新了
		onShow() {
			let token = this.$store.state.token
			if (token) {
				this.albumList = []
				this.pageNum = 1
				this.getAlbumList();
			}
		},
		// mounted() {
		// 	// 绑定事件
		// 	uni.$on('getAlbumList',(data)=>{
		// 		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg)
		// 		this.getAlbumList();
		// 	})
		// },
		// beforeDestroy() {
		// 	// 解绑
		// 	uni.$off('getAlbumList')
		// },
		onReachBottom() {
			//当前页+1，然后判断当前页是否大于总页数，若<=则继续获取数据，大于则什么都不做
			this.pageNum++
			if(this.pageNum <= this.pages) {
				this.getAlbumList()
			}
		},
		methods: {
			// vuex储存信息
			...mapMutations([
				"setBaseUserInfo", //设置用户基本信息
				"setToken", //设置token
			]),
			...mapState([
				"baseUserInfo", //用户信息
			]),
			// 获取用户信息
			getData() {
				let token = this.$store.state.token
				if (token === "") {
					uni.showModal({
						title: "温馨提示",
						content: "亲，授权微信登录后才能操作！",
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								let jsCode = ""
								uni.login({
									provider: "weixin",
									success: (loginRes) => {
										if (loginRes.errMsg === "login:ok") {
											jsCode = loginRes.code
											console.log(jsCode);
										}
									},
								})
								// 授权
								uni.getUserProfile({
									desc: "登录",
									success: (userInfo) => {
										console.log("用户信息:", userInfo);
										// this.setBaseUserInfo(userInfo.userInfo)
										this.$request({
											url: '/login',
											method: 'post',
											data: {
												//授权码
												code: jsCode,
												name: userInfo.userInfo.nickName,
												avatar: userInfo.userInfo.avatarUrl,
												sex: userInfo.userInfo.gender
											}
										}).then(res =>{
											if(res.code === 200) {
												this.setToken(res.data.token)
												// uni.setStorageSync('App-Token', res.data.token)
												this.albumList = []
												this.pageNum = 1
												this.getAlbumList()
											}
										})
									},
									fail:(err) => { },
								})
							}
						},
					})
				}
			},
			
			// 获取数据
			getAlbumList() {
				this.$request({
					url: '/life/album/list',
					data:{
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				}).then(res => {
					console.log(res.data.records)
					this.albumList.push(...res.data.records)
					this.pages = res.data.pages
					// 后端处理封面路径，下面就不需要了
					// this.albumList.forEach(album =>{
					// 	if(album.albumCover !== null  && album.albumCover !== '') {
					// 		this.$request({
					// 			url: '/minio/preview?fileName=' + album.albumCover
					// 		}).then(response => {
					// 			album.albumCover = response.data
					// 		})
					// 	}
					// })
				})
			},
			// 新增相册
			addAlbum(){
				uni.navigateTo({
					url: '/pages/album/index'
				})
			},
			// 跳转到照片页面
			navigateToImageList(albumId) {
				uni.navigateTo({
					url:'/pages/img/index?albumId=' + albumId
				})
			},
			showEditOrDel(albumId){
				uni.showActionSheet({
					itemList: ['编辑', '删除'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							uni.navigateTo({
								url:'/pages/album/index?albumId=' + albumId
							})
						} else {
							this.delAlbum(albumId);
						}
					}
				});
			},
			//删除相册
			delAlbum(albumId){
				uni.showModal({
				  title: '提示',
				  content: '确定删除该相册吗?',
				  cancelText: '取消',
				  confirmText: '确定',
					success: (res)=>{
						if (res.confirm) {
							this.$request({
								url: '/life/album/remove?albumId=' + albumId
							}).then(response => {
								uni.showToast({ title: "删除成功", icon: 'success' })
								this.albumList = []
								this.pageNum = 1
								this.getAlbumList()
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.album-list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		
		.album-item{
			background: #fff;
			width: 375rpx;
			margin: 10rpx 0;
			padding-left: 18px;
			padding-top: 5px;
			box-sizing: border-box;
			
			.album-name{
				font-size: 14px;
				font-weight: bold;
				line-height: 50rpx;
				padding-top: 10rpx;
				margin-left: 10%;
			}
			
			.img-count{
				font-size: 12px;
				margin-left: 10%;
			}
		}
	}
</style>